<template>
  <div class="settings">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>账号设置</h2>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <!-- 修改密码 -->
        <el-tab-pane label="修改密码" name="password">
          <el-form
            ref="passwordFormRef"
            :model="passwordForm"
            :rules="passwordRules"
            label-width="100px"
            class="settings-form"
          >
            <el-form-item label="当前密码" prop="oldPassword">
              <el-input
                v-model="passwordForm.oldPassword"
                type="password"
                show-password
                placeholder="请输入当前密码"
              />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input
                v-model="passwordForm.newPassword"
                type="password"
                show-password
                placeholder="请输入新密码"
              />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                v-model="passwordForm.confirmPassword"
                type="password"
                show-password
                placeholder="请再次输入新密码"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handlePasswordChange">
                修改密码
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 安全设置 -->
        <el-tab-pane label="安全设置" name="security">
          <el-form
            ref="securityFormRef"
            :model="securityForm"
            label-width="200px"
            class="settings-form"
          >
            <el-form-item label="登录通知">
              <el-switch v-model="securityForm.loginNotification" />
              <span class="form-tip">开启后，每次登录都会收到邮件通知</span>
            </el-form-item>
            <el-form-item label="异地登录提醒">
              <el-switch v-model="securityForm.locationNotification" />
              <span class="form-tip">开启后，在异地登录时会收到提醒</span>
            </el-form-item>
            <el-form-item label="登录设备管理">
              <el-button type="primary" link @click="handleDeviceManage">
                查看已登录设备
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSecuritySave">
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 通知设置 -->
        <el-tab-pane label="通知设置" name="notification">
          <el-form
            ref="notificationFormRef"
            :model="notificationForm"
            label-width="200px"
            class="settings-form"
          >
            <el-form-item label="系统通知">
              <el-switch v-model="notificationForm.systemNotification" />
              <span class="form-tip">接收系统更新、维护等通知</span>
            </el-form-item>
            <el-form-item label="安全通知">
              <el-switch v-model="notificationForm.securityNotification" />
              <span class="form-tip">接收账号安全相关的通知</span>
            </el-form-item>
            <el-form-item label="邮件通知">
              <el-switch v-model="notificationForm.emailNotification" />
              <span class="form-tip">通过邮件接收重要通知</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleNotificationSave">
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('password')

// 密码表单
const passwordFormRef = ref(null)
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 密码验证规则
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (passwordForm.confirmPassword !== '') {
      passwordFormRef.value?.validateField('confirmPassword')
    }
    callback()
  }
}

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== passwordForm.newPassword) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const passwordRules = {
  oldPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, validator: validatePass, trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, validator: validatePass2, trigger: 'blur' }
  ]
}

// 安全设置表单
const securityFormRef = ref(null)
const securityForm = reactive({
  loginNotification: true,
  locationNotification: true
})

// 通知设置表单
const notificationFormRef = ref(null)
const notificationForm = reactive({
  systemNotification: true,
  securityNotification: true,
  emailNotification: true
})

// 修改密码
const handlePasswordChange = async () => {
  if (!passwordFormRef.value) return
  
  try {
    await passwordFormRef.value.validate()
    // TODO: 调用API修改密码
    ElMessage.success('密码修改成功')
    passwordForm.oldPassword = ''
    passwordForm.newPassword = ''
    passwordForm.confirmPassword = ''
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 保存安全设置
const handleSecuritySave = async () => {
  // TODO: 调用API保存安全设置
  localStorage.setItem('securitySettings', JSON.stringify(securityForm)); // 保存到 localStorage
  ElMessage.success('安全设置保存成功')
}

// 保存通知设置
const handleNotificationSave = async () => {
  // TODO: 调用API保存通知设置
  localStorage.setItem('notificationSettings', JSON.stringify(notificationForm)); // 保存到 localStorage
  ElMessage.success('通知设置保存成功')
}

// 设备管理
const handleDeviceManage = () => {
  ElMessage.info('设备管理功能开发中')
}

// 加载设置
const loadSettings = () => {
  const savedSecuritySettings = localStorage.getItem('securitySettings');
  if (savedSecuritySettings) {
    try {
      Object.assign(securityForm, JSON.parse(savedSecuritySettings));
    } catch (e) {
      console.error('Failed to load security settings from localStorage:', e);
    }
  }

  const savedNotificationSettings = localStorage.getItem('notificationSettings');
  if (savedNotificationSettings) {
    try {
      Object.assign(notificationForm, JSON.parse(savedNotificationSettings));
    } catch (e) {
      console.error('Failed to load notification settings from localStorage:', e);
    }
  }
};

onMounted(() => {
  loadSettings(); // 在组件挂载时加载设置
})
</script>

<style scoped>
.settings {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 20px;
}

.settings-form {
  max-width: 600px;
  margin: 20px auto;
}

.form-tip {
  margin-left: 10px;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
</style>

 